<template>
    <div>
        <div>
            <div class="in-header">
                <el-container>
                    <el-header class="title">2018中国-东盟矿业合作论坛在南宁</el-header>
                    <el-header class="zx-border">
                        <!--<span>专项类型</span>-->
                        <span class="dy">调研</span>
                        <span>承办人</span>
                        <span class="dy">张三</span>
                        <span>交办领导</span>
                        <span class="dy">李四</span>
                        <span>开始时间</span>
                        <span class="dy">2018-11-19</span>
                        <span>计划完成时间</span>
                        <span class="dy" style="border-right: 0px">2018-12-11</span>
                    </el-header>
                    <el-container class="footer">
                        <el-aside width="85px" class="xm">说明</el-aside>
                        <el-main>中国-东盟</el-main>
                    </el-container>
                </el-container>
            </div>
            <div class="header-btn">
                <div></div>
                <div class="btn">
                    <el-button type="primary">编辑</el-button>
                    <el-button type="primary">关联信息</el-button>
                    <el-button type="primary">确认完成</el-button>
                </div>
            </div>
        </div>
        <div class="line"></div>

        <div class="in-offPd">
            <div class="in-officeContent">
                <div class="icon-y"></div>
                <div class="item-text">
                    <div class="left">
                        <div class="btn-bl">拟制公文</div>
                        <p>10:24</p>
                        <p>2018-12-05</p>
                    </div>
                    <div class="text-border">
                        <div>
                            <div class="item">10月29号现场布置以及相关物品采购0月29号现场布置以及相关物品采购0月29号现场布置以及相关物品采购</div>
                            <p class="cbr"><span>承办人：张三</span> <span style="margin-left: 30px">状态：已送审</span></p>
                        </div>
                        <div class="zz">相关工作</div>
                    </div>
                </div>
            </div>
            <div class="in-officeContent">
                <div class="icon-y"></div>
                <div class="item-text01">
                    <p>2018-12-05 10:24</p>
                    <div class="text-border01">
                        <div>
                            <div class="item">10月29号现场布置以及相关物品采购</div>
                            <p class="cbr"><span>承办人：张三</span> <span style="margin-left: 30px">状态：已送审</span></p>
                        </div>
                        <div class="zz">相关工作</div>
                    </div>
                </div>
            </div>
            <div class="in-officeContent">
                <div class="icon-y"></div>
                <div class="item-text01">
                    <p>2018-12-05 10:24</p>
                    <div class="text-border01">
                        <div>
                            <div class="item">10月29号现场布置以及相关物品采购</div>
                            <p class="cbr"><span>承办人：张三</span> <span style="margin-left: 30px">状态：已送审</span></p>
                        </div>
                        <div class="zz">相关工作</div>
                    </div>
                </div>
            </div>
            <div class="in-officeContent">
                <div class="icon-y"></div>
                <div class="item-text01">
                    <p>2018-12-05 10:24</p>
                    <div class="text-border01">
                        <div>
                            <div class="item">10月29号现场布置以及相关物品采购</div>
                            <p class="cbr"><span>承办人：张三</span> <span style="margin-left: 30px">状态：已送审</span></p>
                        </div>
                        <div class="zz">相关工作</div>
                    </div>
                </div>
            </div>
        </div>

        <!--下一步底部按钮-->
        <div class="footer-btn">下一步流程</div>
    </div>

</template>

<script>
    export default {
        name: "inOfficeDetail"
    }
</script>

<style scoped>
    .el-button--primary{
        width: 128px!important;
        height: 45px!important;
        background-color: #4378ef!important;
        border-radius: 10px;
        font-size: 20px;
    }
    .footer-btn{
        cursor: pointer;
        background-color: #4378ef;
        position: absolute;
        bottom: 20px;
        right: 50px;
        color: #fff;
        width: 166px;
        height: 54px;
        text-align: center;
        line-height: 50px;
        border-radius: 10px;
        font-size: 20px;
    }
    .zz{
        cursor: pointer;
        border: 1px solid #6392FC;
        border-radius: 50px;
        color: #6392FC;
        /*padding: 5px 15px;*/
        text-align: center;
        width: 100px;
        height: 30px;
        line-height: 30px;
    }
    .cbr{
        margin-top: 10px;
        color: #2f4050;
    }
    .left{
        font-size: 12px;
        padding-right: 10px;
        margin-top: -5px;
        color: #2f4050;
    }
    .left>p{
        text-align: center;
    }
    .btn-bl{
        font-size: 18px;
        width: 100px;
        padding: 5px 0;
        text-align: center;
        background-color: #6392fc;
        color: #fff;
    }
    .in-offPd{
        font-size: 18px;
        padding-bottom: 150px;
        padding-top: 20px;
        padding-right: 20px;
    }
    .icon-y{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 2px solid #18B596;
    }
    .item-text{
        position: relative;
        margin-left: 30px;
        display: flex;
    }
    .text-border{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-top: -10px;
        border: 1px solid #c6c6c6;
        border-radius: 7px;
        padding: 15px 20px 15px 10px;
    }
    .text-border01{
        /*width: 100%;*/
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        border: 1px solid #c6c6c6;
        border-radius: 7px;
        padding: 15px 20px 15px 10px;
    }
    .item-text:before{
        content: "";
        position: absolute;
        top: 19px;
        left: -22.5px;
        width: 2px;
        height: 100%;
        background-color: #ADADAD;
    }
    .item-text01{
        position: relative;
        margin-left: 30px;
    }
    .item-text01:before{
        content: "";
        position: absolute;
        top: 19px;
        left: -22.5px;
        width: 2px;
        height: 100%;
        background-color: #ADADAD;
    }
    .item-text01>p{
        color: #2f4050;
    }
    .in-officeContent{
        margin-top: 19px;
        margin-left: 20px;
        /*display: flex;*/
        position: relative;
    }
    .line{
        width: 100%;
        height: 10px;
        background-color: rgba(198, 198, 198,0.5);
    }
    .header-btn{
        display: flex;
        justify-content: space-between;
        margin-right: 20px;
        margin-bottom: 20px;
    }
    .el-button--mini, .el-button--small{
        width: 80px;
    }
    .in-header{
        border: 1px solid #bfbfbf;
        margin: 20px;
    }
    .title{
        border-bottom: 1px solid #bfbfbf;
        height: 54px!important;
        line-height: 54px;
        font-size: 30px;
        color: #2f4050;
        font-weight: normal;
        font-stretch: normal;
    }
    .zx-border{
        color: #808080;
        font-size: 18px;
        height: 40px!important;
        padding: 0;
        display: flex;
    }
    .zx-border>span{
        display: flex;
        align-items: center;
        text-align: center;
        padding: 0 10px;
        height: 100%;
        border-right: 1px solid #bfbfbf;;
        color: #8c8c8c;
    }
    .dy{
        color: #2f4050!important;
    }
    .footer{
        color: #8c8c8c;
        border-top: 1px solid #bfbfbf;
    }
    .xm{
        font-size: 18px;
        text-align: center;
        line-height: 61px;
        width: 93px!important;
        border-right: 1px solid #bfbfbf;
    }
</style>

